

<template>
  <div id="containers" ref="containers" data-v-5c8289c0="" class="blackfixed">
    <div class="promotContent" ref="promotc" id="promotContent"  :style="{width:width}">
      <div class="contents" style="background-color: #f2f2f2;">
      <div class="el-dialog__header"><span class="el-dialog__title">{{title}}</span>
        <button @click="close" type="button" aria-label="Close" class="el-dialog__headerbtn"><i
                class="el-dialog__close el-icon el-icon-close"></i></button>
      </div>
      <div class="el-dialog__body" >
        <div id="bodyContent" ref="bodyContent"></div>
      </div>
      </div>
    </div>


  </div>



</template>

<script>
  import Vue from 'vue'
  import store from '../store'
  export default {
    name: "card",
    props:['width','title','height','props','funCode','callback'],
    data(){
      return{
        centerDialogVisible:true,

      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.render()
    })
      // alert(this.$store.state.themcolor)
    },
    methods:{
      render:function(){
        let vm = this;
        var com = window.getRouter(this.funCode);
        com.component.methods.callback =function (obj={}) {
          if(vm.callback){
            vm.callback(vm.close,obj)
          }
        }
        com.component.methods.close =function () {
          vm.close()
        }
        var app= Vue.extend({
          render:function (createElement) {
            return createElement(com.component,{
              props: vm.props
            });
          },
          store

        })
        new app().$mount('#bodyContent')
        setTimeout(()=>{
          this.$refs.containers.style.opacity="1"
        // document.getElementById('containers').style.opacity="1"
        // document.getElementById('promotContent').style.right="0"
      })

      },


      close(){

        this.$destroy()
        this.$el.remove();

      },

    }
  }
</script>

<style   lang="scss" scoped>
  .promotContent{
    background:#FFF;
    position: absolute;
    height:100%;
    top:0;
    right:0;
    bottom:0;
    overflow: auto;
    transition: all 50ms;
    .contents{
      position: relative;width:100%;height:100%;
    }
  }
  #bodyContent{
    max-height: 500px;
    overflow: auto;
  }
  .blackfixed{
    background:rgba(0,0,0,.5);
    width:100%;height:100%;
    top:0;
    opacity: 0;
    position:fixed;
    left:0;

    z-index:99;
    transition: all 200ms;

  }
  .el-dialog__body{
    position: absolute;   left:0;top:50px;right:0;bottom:0;overflow: hidden;overflow-y: auto}
  .el-icon-close{font-size:26px;
    position: relative;
    top:-5px;  border-radius: 5px; color:red;}
  .el-dialog__body{padding-top:10px;}
  .el-icon-close:hover{color:red; opacity: .5}
</style>
